<template>
  <div class="home">
    <div style="height:260px"></div>
    <TinyInfo style="margin:0 auto" />
    <div class="container">
      <div class="container-left">
        <TinyBlogs style="tiny-blogs" />
      </div>
      <div class="container-right">
        <Music style="margin:0 auto;margin-bottom:20px"/>
        <Todos  style="margin:0 auto;margin-bottom:20px"/>
        <Likes style="margin:0 auto;margin-bottom:20px"/>
        <TinyMessages />
      </div>
    </div>
  </div>
</template>

<style scoped>
.container {
  margin: 0 auto;
  margin-top: 20px;
  text-align: center;
  vertical-align: top;
  width: 1050px;
}

.container-left{
  display: inline-block;
  vertical-align: top;
  width: 750px;
}

.container-right{
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
  width: 290px;
}


</style>

<script>
// @ is an alias to /src
import TinyInfo from "@/components/TinyInfo.vue";
import TinyBlogs from "@/components/TinyBlogs.vue";
import Music from "@/components/Music.vue";
import Todos from "@/components/Todos.vue";
import Likes from "@/components/Likes.vue";
import TinyMessages from "@/components/TinyMessages.vue";

export default {
  name: "Home",
  components: {
    TinyInfo,
    TinyBlogs,
    Music,
    Todos,
    Likes,
    TinyMessages
  },
  data(){
    return{
      isManager:this.$root.isManager
    }
  },
  methods:{
    testApi(){
      var that=this;
      this.$http({
        url: "servlet/test",
        method: "post",
        //发送格式为json
        headers: {
          "Content-Type": "application/json;charset=utf-8"
        }
      }).then(
        function(res) {
          console.log(res);
          that.test=res.data.test;
        },
        function(res) {
          console.log("啊呀，test出错啦");
        }
      );
    }
  }
};
</script>
